<template>
  <div id="app">

    <returntop></returntop>

    <div class="rettop"></div>

    <ul class="goodstitle">
      <li v-for="item in goodsList" :key="item.id">
        <img :src="item.app_list_pic_url" alt="" />
        <p>{{ item.name }}</p>
        <p>{{ item.simple_desc }}</p>
      </li>
    </ul>

    <ul class="goodslist">
      <li v-for="val in goodsList.goodsList" :key="val.id">
        <img :src="val.list_pic_url" alt="" />
        <p>{{ val.name }}</p>
        <p>￥{{ val.retail_price }}</p>
      </li>
      <div class="bott"></div>
    </ul>
  </div>
</template>

<script type="text/javascript">
import returntop from "../../../../components/homecomp/returntop";
import { detailaction } from "@/api/home/brand/detailaction/index";
export default {
  data() {
    return {
      goodsList: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/home/brand" });
    },
  },
  computed: {},
  components: {
    returntop,
  },
  async created() {
    var res = await detailaction({
      id: this.$route.params.ids,
    });
    this.goodsList = res;
    console.log(this.goodsList);
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.rettop {
  height: 46px;
}
#app {
  background-color: #f4f4f4;
}
.goodstitle {
  li {
    position: relative;
    background-color: #fff;
  }
  & :nth-child(2) {
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #fff;
    font-weight: 300;
    border-bottom: 2.5px solid #fff;
  }
  & :nth-child(3) {
    font-size: 16px;
    color: #666;
    // padding: 10px 15px;
  }
  img {
    width: 100%;
    height: 145px;
  }
}
.goodslist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  li {
    width: 184px;
    height: 240px;
    background-color: #fff;
    border-bottom: 3px solid #f4f4f4;
    & :nth-child(3) {
      color: #b4282d;
    }
  }
  img {
    width: 151px;
  }
  .bott {
    width: 184px;
    height: 0.1px;
  }
}
</style>
